<template>
    <div class="container">
        <div class="handle-box">
            <el-form ref="form" :model="form" label-width="100px" class="flex">
                <el-form-item label="兑换日期：">
                    <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="居民姓名：">
                    <el-input
                        v-model="userName"
                        placeholder="请输入居民姓名"
                        class="handle-input mr10"
                    ></el-input>
                </el-form-item>
                <el-form-item label="兑换物品：">
                    <el-input
                        v-model="prodName"
                        placeholder="请输入兑换物品"
                        class="handle-input mr10"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="mohu()">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
           <el-table-column
              prop="Name"
              label="居民姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="EX_NAME"
              label="兑换物品"
              width="180">
            </el-table-column>
            <el-table-column
              prop="EX_COUNT"
              label="兑换个数">
            </el-table-column>
            <el-table-column
              prop="EX_POINTS"
              label="兑换积分"
              width="180">
            </el-table-column>
            <el-table-column
              prop="EXCHANGETIME"
              label="兑换时间"
              width="180">
              <template scope="scope">
                  {{ $moment(scope.row.EXCHANGETIME).format('YYYY-MM-DD HH:mm:ss') }}
              </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="tableData.length"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import '../../assets/css/common.css'

export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      userName: '',
      prodName: '',
      // 原始数据
      originalData: [],
      tableData: [],
      form: {},
      dateRange: []
    }
  },
  created () {
    this.getData();
  },
  methods: {
    getData () {
      const VID ='2';
      this.$axios({
        url: `${this.$iurl}/GetResidentConsumptionPointsDetailApi?VID=${VID}`,
        method: 'get'
      }).then(res => {
        if (res.status == 200) {
            this.originalData = res.data
            this.mohu()
        //   console.log(res.data)
        }
      })
    },
    // 模糊查询
    mohu () {
      this.tableData = this.originalData;
      if (this.userName !== '') this.tableData = this.tableData.filter(item => item.Name.includes(this.userName));
      if (this.prodName !== '') this.tableData = this.tableData.filter(item => item.EX_NAME.includes(this.prodName));
      if (this.dateRange && this.dateRange.length) this.tableData = this.tableData.filter(item => this.$moment(item.EXCHANGETIME).isBefore(this.$moment(this.dateRange[1]).endOf('day')) &&
       this.$moment(item.EXCHANGETIME).isAfter(this.$moment(this.dateRange[0]).startOf('day')));
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange (size) {
      this.pageSize = size;
    }
  }
}
</script>
<style scoped>
</style>